<template>
    <div class="middle-right">
        <h3>作业列表</h3>
        <detail-bar :submit-persons="submitPersons"
                    :homework="homework"
                    :zhuguan="zhuguan"
                    :homeworks="homeworks"
                    :self-check-open.sync="selfCheckOpen",
                    :master-check-open.sync="masterCheckOpen"
                    :detail-open.sync="detailOpen"
                    :submit-persons-open.sync="submitPersonsOpen">
        </detail-bar>

        <div class="table-parent">
            <hr class="homework-hr">
            <table class="table homework-table">
            <thead>
                <tr>
                    <th width="54">序号</th>
                    <th width="90">布置时间</th>
                    <th width="386">作业内容</th>
                    <th width="100">截止时间</th>
                    <th width="85" v-if="!zhuguan">自我评价</th>
                    <th width="92" v-if="zhuguan">已提交</th>
                    <th width="85" v-if="!zhuguan">作业评分</th>
                    <th width="78" v-if="zhuguan">负责人</th>
                </tr>
            </thead>

            <tbody>
            <tr v-for="homework in homeworks" @click="checkDetail(homeworks.indexOf(homework), $event)">
                <td width="54"> {{ homeworks.indexOf(homework) }} </td>
                <td width="90">
                    {{ homework.setDate.split('T')[0].split('-')[1] + '.' + homework.setDate.split('T')[0].split('-')[2] }}
                </td>
                <td width="386"> {{ homework.homeworkName }} </td>
                <td width="100"
                    :class="{'homework-overdue': (new Date(homework.deadLine)) < (Date.now()),
                            'homework-A': homework.submit && (new Date(homework.deadLine)) > (Date.now()),
                            'homework-B': !homework.submit && (new Date(homework.deadLine)) > (Date.now()),
                            }">
                    {{ homework.deadLine.split('T')[0].split('-')[1] + '.' + homework.deadLine.split('T')[0].split('-')[2] }}
                </td>

                <td v-if="!zhuguan" width="92">{{ (homework.user.selfCheck || '待评分') }}<span v-if="homework.user.selfCheck != undefined && homework.user.selfCheck != '待评分' && homework.user.selfCheck != undefined">/10</span></td>
                <td v-if="zhuguan" width="92">{{ homework.updateNum }}/{{ homework.staffNum }}</td>

                <td v-if="!zhuguan" width="78">
                    <span
                        :class="{'homework-A': homework.score >=8,
                                'homework-B': 6 < homework.score && homework.score < 8,
                                'homework-C': homework.score <= 6 }">
                        {{ (homework.user.masterCheck == undefined) ? '待评分': homework.user.masterCheck }}</span><span v-if="homework.user.masterCheck != '待评分' && homework.user.masterCheck != undefined">/10</span>
                </td>
                <td v-if="zhuguan" width="78">{{ homework.inCharge }}</td>
            </tr>

            </tbody>
        </table>
        </div>


        <loading v-if="loading"></loading>
    </div>
</template>

<style lang="sass">
    .middle-right{
        height: 100%;
        padding-bottom: 100px;
        overflow: auto;
        position: relative;
    }
    /*以下,作业详情*/

    .table-parent{
        transition:all 0.5s ease;
        margin: 30px 40px;
        .homework-table{
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #474c5b;
        }
        .homework-hr{
            width: 100%;
            margin: 0 0 30px 0;
        }
    }

    /*此处的middle-right用于提升重要性*/
    .middle-right table.homework-table td,.middle-right table.homework-table th{
        line-height: 40px;
        cursor: pointer;
        border: none;
    }
    .homework-table thead tr{
        background-color: #f8f9fc;
        border-bottom:1px solid #d5d5d5;
    }

    .homework-table tr:hover, .homework-table tr.selected{
        background-color: #e3f2fd;
    }
    .homework-table tbody tr{
        height: 40px;
    }
    .homework-table thead{
        height: 50px;
    }
    .homework-table th{
        text-align: center;
    }

    /*作业评价 class*/
    .homework-overdue{
        color: #a0a0a0;
    }
    .homework-A{
        color: #32b16c;
    }
    .homework-B{
        color: #eb6100;
    }
    .homework-C{
        color: #e74c3c;
    }

</style>

<script>

    export default{
        data(){
            return{
                item:'作业系统',
                homeworks: [],
                submitPersons:[],
                zhuguan:true,
                homework:{},
                loading:false,
                selfCheckOpen: true,
                masterCheckOpen: true,
                detailOpen: true,
                submitPersonsOpen:true,
            }
        },
        ready(){
            this.$http.get('../user/detail').then(function (d) {
                if (d.data.position == 6) {
                    this.zhuguan = false;
                }
            }, function (err) {
                console.log(err.status)
            });
            this.$http.post('/admin/work/allwork').then(function (d) {
                this.homeworks = d.data;

            }, function (err) {
                console.log('err')
            });

        },
        methods:{
            // 查看详情页
            checkDetail(id, $event){
                var _this = this;
                if (this.zhuguan) {
                    var name = this.homeworks[id].homeworkName;
                    this.$http.post('/admin/work/workDetail', {
                        homeworkName: name
                    }).then(function (d) {
                        this.homework = this.homeworks[id];
                        this.homework.homeworkDetail = d.data.homeworkDetail;
                        this.homework.file = d.data.file;
                        this.selfCheckOpen = false;
                        this.masterCheckOpen = false;
                        this.submitPersonsOpen = true;
                        this.detailOpen = true;
                        this.submitPersons = [];
                        for(var attr in d.data ){
                            if (attr != 'homeworkDetail' && attr != 'file') {
                                var submitPerson = d.data[attr];
                                submitPerson['userid'] = attr;
                                this.submitPersons.push(submitPerson);
                            };
                        };

                    }, function (err) {
                        console.log(err);
                    });
                    openDetail();
                }else {
                    this.submitPersonsOpen = false;
                    if ((this.homeworks[id].user).hasOwnProperty('commentID')) {
                        //获取相应id评价人的头像链接
                        var commentID = this.homeworks[id].user.commentID
                        this.$http.post('/admin/work/mas', {'commentID': commentID}).then(function (d) {
                             // 设置对象然后传参
                            this.homework = this.homeworks[id];
                            this.homework.user['avatarMsg'] = d.data;

                            // 关闭loading
                            this.loading = false;

                            //打开详情栏
                            openDetail();

                        }, function (err) {
                            console.log(err);
                        });
                    }else {
                        this.homework = this.homeworks[id];
                        this.homework.user = {
                            comment: '待评价',
                            selfCheck: this.homeworks[id].user.selfCheck || '待评分',
                            masterCheck: this.homeworks[id].user.masterCheck ||  '待评分',
                            workName: this.homeworks[id].user.workName || '待提交',
                            workLink: this.homeworks[id].user.workLink
                        }
                        openDetail();
                    }
                }

                // 上色函数
                function fillScore(score, el) {
                    var scoreDiv = el.getElementsByClassName("score-div")[0];
                    var li = scoreDiv.getElementsByTagName("li");
                    var roundScore = Math.round(score);
                    for (var i = 1; i <= roundScore; i++) {
                        li[i-1].style['background-color'] = 'rgba(51, 153, 255,'+ i/10 + ')';
                    }
                }

                // 展开详情栏
                function openDetail() {
                    var detailBar = document.getElementsByClassName('detailBar')[0],     // 详情栏
                        tableParent = document.getElementsByClassName('table-parent')[0],      // 父容器
                        tableTr = tableParent.getElementsByTagName('tr'),   // 行
                        eventTr = $event.target.parentNode;     // 点击行

                    // 添加选中样式
                    for (var i = 0; i < tableTr.length; i++) {
                        tableTr[i].className = '';
                    };
                    eventTr.className = 'selected';

                    // css3动画
                    tableParent.style.marginRight = '380px';

                    detailBar.style.opacity = 1;
                    detailBar.style['z-index'] = 0;
                    if (_this.zhuguan == false) {
                         // 根据分数进行上色
                        var selfCheck = document.getElementsByClassName('selfCheck')[0];
                        var masterCheck = document.getElementsByClassName('masterCheck')[0];

                        fillScore(_this.homework.user.selfCheck, selfCheck);
                        fillScore(_this.homework.user.masterCheck, masterCheck);
                    }
                }
            },
        },
        components: {
            'detailBar': require('../components/detailBar.vue'),
            'loading': require('../components/loading.vue'),
        },
    }
</script>
